<script setup>
import {computed, ref} from "vue"
import {onLoad} from "@dcloudio/uni-app"
import {pickupApi} from "@/apis/task.js"
  // 回单凭证图片
  const receiptPictrues = ref([])
  // 货品图片
  const goodsPictures = ref([])
  let id=''
  onLoad((options)=>{
	  id=options.id
	  console.log();
  })

//兜底校验实现：只有两个都选择才会成功显示。
  const enableSubmit=computed(()=>{
	  return goodsPictures.value.length>0&&receiptPictrues.value.length>0
  })


  //点击确定
  const submit=async()=>{
	  const dataA={
	  	id,
	  	// 回单凭证
	  				cargoPickUpPictureList: receiptPictrues.value.map(item => ({
	  					url: item.url
	  				})),
	  				//  货品照片
	  				cargoPictureList: goodsPictures.value.map(item => ({
	  					url: item.url
	  				}))
	  }
	 await pickupApi(dataA)
	 uni.reLaunch({
	 	url:'/subpkg_task/detail/index?id=' + id 
	 })
  }
</script>
<template>
	<view class="page-container">
		<view class="receipt-info">
			<!-- 云上传的组件uni-file-picker（这个组件内部会自动关联项目开通的云空间）
		 limit控制上传数量
		 title上传的内容
		 file-extname校上传的图片格式
		 v-model存储上传图片的显示和结果
		 -->
			<uni-file-picker v-model="receiptPictrues" file-extname="jpg,webp,gif,png" limit="3" title="请拍照上传回单凭证"></uni-file-picker>
			<uni-file-picker v-model="goodsPictures" file-extname="jpg,webp,gif,png" limit="3" title="请拍照上传货品照片"></uni-file-picker>
		</view>
		<button class="button" :disabled="!enableSubmit" @click="submit">提交</button>
	</view>
</template>

<style lang="scss" scoped>
.page-container {
	padding: 30rpx;
}

.receipt-info {
	min-height: 600rpx;
	background-color: #fff;
	padding: 20rpx 30rpx;
	border-radius: 16rpx;

	::v-deep .uni-file-picker {
		margin-bottom: 30rpx;
	}
}

.button {
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	/* #ifdef APP */
	padding-top: 4rpx;
	/* #endif */
	border-radius: 100rpx;
	margin-top: 60rpx;
	color: #fff;
	font-size: $uni-font-size-big;
	background-color: $uni-primary;

	&[disabled],
	&.disabled {
		color: #fff;
		background-color: #fadcd9;
	}
}
</style>
